<template>
  <van-tabbar v-model="active" placeholder>
    <van-tabbar-item icon="home-o" to="home">{{t('homePage')}}</van-tabbar-item>
    <van-tabbar-item icon="search" to="search">{{t('search')}}</van-tabbar-item>
    <van-tabbar-item icon="chat-o" to="upcomingTasks">{{t('todoTasks')}}</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps(['active'])
const active = ref(props.active)
</script>

<style scoped lang="less">
:deep(.van-tabbar-item__text) {
  font-size: 1rem;
}
</style>